<!DOCTYPE html>
<html lang="en">
<include file="./Application/Home/View/Layout/head.html" />

        <link href="__PUBLIC__/assets/bootstrap/css/select2.css" rel="stylesheet" />		
        <link href="__PUBLIC__/assets/bootstrap/css/jquery.dataTables.min.css" rel="stylesheet">
        <style type="text/css">
.loadEffect{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
	display:none;
}
.loadEffect span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
 }
 @-webkit-keyframes load{
    0%{
       opacity: 1;
    }
    100%{
       opacity: 0.2;
    }
 }
 .loadEffect span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.13s;
 }
 .loadEffect span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
 }
 .loadEffect span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay:0.39s;
 }
 .loadEffect span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
 }
 .loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.65s;
 }
 .loadEffect span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
 }
 .loadEffect span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay:0.91s;
 }
 .loadEffect span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
 }
	 .Alertmessage{
		text-align: center;
	    color: red;
	 }
  </style>

    <body>
        <block name="header">
           <include file="block/header"/>
        </block>
        <section>
            <div class="mainwrapper">
			   <block name="left">
			   <include file="block/left" />
               </block>
                
                <div class="mainpanel">
                    <div class="contentpanel">
                       
                       	<div class="col-md-12">
                                <form id="basicForm" action="form-validation.html">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="panel-btns">
                                            <a href="#" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                                            <a href="#" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                                        </div><!-- panel-btns -->
                                        <h4 class="panel-title">联系人添加</h4>
                                    </div><!-- panel-heading -->
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="form-group clearfix">
                                                <label class="col-sm-2 control-label">名称 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="name" name="name" class="form-control" placeholder="用户名" required />
                                                </div>
                                            </div><!-- form-group -->
                                          
                                           <!--  <div class="form-group">
                                                <label class="col-sm-2 control-label">性别 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                <select id="sex" data-placeholder="Choose One" class="width100p" required>
                                                    <option value="0">未知</option>
                                                    <option value="1">男</option>
                                                    <option value="2">女</option>
                                                </select>
                                            </div> -->
                                            </div><!-- form-group -->
                                          
                                            <div class="form-group clearfix">
                                            <label class="col-sm-2 control-label">所属分组<span class="asterisk">*</span></label>
                                            <div class="col-sm-6">
                                                <select id="departMent" data-placeholder="Choose One" class="width100p" required>
                                                    <option value="0">请选择</option>
                                                    <foreach name="rs" item="list">
                                                        <option value="{$list.deptid}">{$list.deptname}</option>
                                                    </foreach>
                                                </select>
                                            </div>
                                        </div><!-- form-group -->
                                            <div class="form-group clearfix">
                                                <label class="col-sm-2 control-label">号码1 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" name="phone1" id="phone1"  class="form-control" placeholder="电话1" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group clearfix">
                                                <label class="col-sm-2 control-label">号码2 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone2" name="phone2" class="form-control" placeholder="电话2" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group clearfix">
                                                <label class="col-sm-2 control-label">号码3 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone3" name="phone4" class="form-control" placeholder="电话3" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">号码4 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone4" name="phone4" class="form-control" placeholder="电话4" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">号码5 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone5" name="phone5" class="form-control" placeholder="电话5" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">号码6 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone6" name="phone6" class="form-control" placeholder="电话6" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">号码7 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone7" name="phone7" class="form-control" placeholder="电话7" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">号码8 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone8" name="phone8" class="form-control" placeholder="电话8" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">号码9 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone9" name="phone9" class="form-control" placeholder="电话9" required />
                                                </div>
                                            </div><!-- form-group -->
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">号码10 <span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <input type="text" id="phone10" name="phone10" class="form-control" placeholder="电话10" required />
                                                </div>
                                            </div><!-- form-group -->
                                            
                                            <div class="form-group clearfix">
                                                <label class="col-sm-2 control-label">备注信息<span class="asterisk">*</span></label>
                                                <div class="col-sm-6">
                                                    <textarea rows="5" id="remark" name="remark" class="form-control" placeholder="备注信息" required></textarea>
                                                </div>
                                            </div><!-- form-group -->
                                        </div><!-- row -->
                                        <div class="modal-footer col-sm-6">
									        <a href="/home/Account/phoneBook" class="btn btn-default" data-dismiss="modal">取消</a>
									        <button type="button" class="btn btn-primary submit">添加</button>
									    </div>
                                    </div><!-- panel-body -->
                           
                                </div><!-- panel -->
                                </form>
                                
                            </div><!-- col-md-6 -->
                           
                           
					      
                        </div><!-- panel -->
                      
                         <div style="clear:both"></div>
                    </div><!-- contentpanel -->
                </div><!-- mainpanel --><!-- mainpanel -->
            </div><!-- mainwrapper -->
            
        <!-- 告警模态框 -->
		<div class="modal fade" id="alertModel" tabindex="-1" role="dialog" aria-labelledby="myAlert">
		  <div class="modal-dialog" role="document" style="width:450px">
		    <div class="modal-content" >
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myAlert" style="text-align: center;">提示</h4>
		      </div>
		      <div class="modal-body">
		        <div class="inner">
		        	<h4 class="Alertmessage"> </h4>
		        </div>
		        
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
		        <!-- <button type="button" class="btn btn-primary sureDel">确定</button> -->
		      </div>
		    </div>
		  </div>
		</div> 

        <div class="modal fade" id="alertModel2" tabindex="-1" role="dialog" aria-labelledby="myAlert">
          <div class="modal-dialog" role="document" style="width:450px">
            <div class="modal-content" >
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myAlert" style="text-align: center;">提示</h4>
              </div>
              <div class="modal-body">
                <div class="inner">
                    <h4 class="Alertmessage"> </h4>
                </div>
                
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <!-- <button type="button" class="btn btn-primary sureDel">确定</button> -->
              </div>
            </div>
          </div>
        </div>         
        </section>
		
        <script src="__PUBLIC__/assets/bootstrap/js/jquery-1.11.1.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/custom.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/select2.min.js"></script>


<script type="text/javascript">
$(document).ready( function () {
    var canManage = "{$canManage}";
    if(canManage == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有管理权限，请联系管理员')
        return;
    }
	// Validation with select boxes
    jQuery("#flowers, #sex").select2({
        minimumResultsForSearch: -1
    });
    jQuery("#flowers, #departMent").select2({
        minimumResultsForSearch: -1
    });
})

$('.submit').click(function(){
    var canManage = "{$canManage}";
    if(canManage == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有管理权限，请联系管理员')
        return;
    }
		var name = $('#name').val();
		var sex = $('#sex').val();
		var departMent = $('#departMent').val();
		var phone1 = Trim($('#phone1').val(),'g');
        var phone2 = Trim($('#phone2').val(),'g');
        var phone3 = Trim($('#phone3').val(),'g');
        var phone4 = Trim($('#phone4').val(),'g');
        var phone5 = Trim($('#phone5').val(),'g');
        var phone6 = Trim($('#phone6').val(),'g');
        var phone7 = Trim($('#phone7').val(),'g');
        var phone8 = Trim($('#phone8').val(),'g');
        var phone9 = Trim($('#phone9').val(),'g');
        var phone10 = Trim($('#phone10').val(),'g');
		var remark = $('#remark').val();

		if(name == ""){
			$('#alertModel').modal('show');
			$('.Alertmessage').html('请输入用户名') 
			return;
		}
		if(departMent == "0"){
			$('#alertModel').modal('show');
			$('.Alertmessage').html('请选择部门') 
			return;
		}
		 
        if(phone1 =='' && phone2 =='' && phone3=='' && phone4=='' && phone5=='' && phone6=='' && phone7=='' && phone8=='' && phone9=='' && phone10==''){
            $('#alertModel').modal('show');
            $('.Alertmessage').html('至少填入一个号码') 
            return;
        }		
		var url ="phoneBookAdd"
		  $.ajax({
				type:"POST",
				url:url,
				data:{
					 name:name,sex:sex,departMent:departMent,phone1:phone1,phone2:phone2,phone3:phone3,phone4:phone4
                    ,phone5:phone5,phone6:phone6,phone7:phone7,phone8:phone8,phone9:phone9,phone10:phone10,remark:remark
				},
				success: function(data){
					if(data.code){
						$('.Alertmessage').css("color",'#1fb5ad');
					}
					else{
						$('.Alertmessage').css("color",'red');
					}
					$('#alertModel').modal('show');
					$('.Alertmessage').html(data.message)
		   		    //$('#alertModel').modal('hide');
		   		    //alert(data.message)
                    setTimeout(rehref,1000);
		   		    
				}
	     })

	})

function rehref(){
    window.location.href="/home/Account/phoneBook"
}

function Trim(str,is_global)
  {
   var result;
   result = str.replace(/(^\s+)|(\s+$)/g,"");
   if(is_global.toLowerCase()=="g")
   {
    result = result.replace(/\s/g,"");
    }
   return result;
}

</script>        
		
		
    </body>
</html>
